<template>
	<view class="content1">
		<uni-popup type="bottom" ref="pickerView" >
			<view class="popup1 flex f-d-c a-i-c">
				<view class="picker-view-box">
					<view class="w-100 flex f-w-w j-c-b">
						<block v-for="(item, index) in week_list" :key="index">
							<view class="item1 f-s-28 unactive flex" :class="choose_list.indexOf(item.id)>-1?'active':'unactive'" @click="chooseWeek(item)">
								{{item.name}}
							</view>
						</block>
					</view>
					<picker mode="time" @change="changeStarTime" >
						<view class="startTime flex a-i-c f-s-28">
							开店时间：<input type="text" v-model="star_time" placeholder="请选择开始时间"/>
						</view>
					</picker>
					<picker mode="time" @change="changeEndTime">
						<view class="startTime flex a-i-c f-s-28">
							闭店时间：<input type="text"  v-model="end_time" placeholder="请选择结束时间"/>
						</view>
					</picker>
				</view>
				<view class="bottom-btn-box flex a-i-c f-s-30">
					<view class="item all-center btn1" @click="close(false)">
						取消
					</view>
					<view class="item all-center btn2" style="background:#2567F3;" @click="close(true)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"pickerView",
		
		data() {
			return {
				week_list:[
					{
						id:'0',
						name:"周日"
					},
					{
						id:'1',
						name:"周一"
					},
					{
						id:'2',
						name:"周二"
					},
					{
						id:'3',
						name:"周三"
					},
					{
						id:'4',
						name:"周四"
					},
					{
						id:'5',
						name:"周五"
					},
					{
						id:'6',
						name:"周六"
					},
				],
				choose_list:[],
				star_time:"",
				end_time:""
			};
		},
		methods:{
			changeStarTime(e){
				console.log(e)
				this.star_time = e.detail.value+':00'
			},
			changeEndTime(e){
				this.end_time = e.detail.value+':00'
			},
			chooseWeek(item){
				let index = this.choose_list.indexOf(item.id)
				if(index<0){
					this.choose_list.push(item.id)
				}else{
					this.choose_list.splice(index,1)
				}
			},
			close(isEnter){
				isEnter && this.$emit("dateBack",{
					weeks:this.choose_list,start:this.star_time,end:this.end_time
				})
				this.$refs.pickerView.close()
			},
			show(business_time){
				let that = this
				let data =  JSON.parse(JSON.stringify(business_time))
				this.choose_list = data.weeks
				this.star_time = data.start
				this.end_time = data.end
				that.$refs.pickerView.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.startTime{
		margin-bottom: 30rpx;
		width: 100%;
		padding: 16rpx 30rpx;
		border-radius: 40rpx;
		background-color: #FFFFFF;
		input{
			border-radius: 20rpx;
			padding: 0 30rpx;
		}
	}
	.picker-view-box{
		width: 750upx;
		height: calc(100% - 96upx);
		padding: 50rpx 30rpx;
		.item1{
			padding: 14rpx 20rpx;
			border-radius: 6rpx;
			margin-bottom: 20rpx;
		}
		.unactive{
			border: 2rpx solid #999999;
			color: #999999;
		}
		.active{
			border: 2rpx solid #2567F3;
			color: #2567F3;
			font-weight: bold;
		}
	}
	.bottom-btn-box{
		.item{
			width: 272upx;
			height: 96upx;
			border-radius: 128upx;
		}
		.btn1{
			border: 2upx solid #979797;
			color: #979797;
			margin-right: 10upx;
		}
		.btn2{
			color: #FFFFFF;
		}
	}
	.popup1{
		width: 750upx;
		height: 594upx;
		background: #ffffff;
		padding-bottom: 68upx;
		position: relative;
		z-index: 999;
		border-radius: 40upx 40upx 0px 0px;
	}
</style>